<template>
  <div>
    {{ channelList }}
    <el-popover v-if="!updateDisable" v-model="visible" placement="left-start" width="380" trigger="click" @hide="afterHide">
      <div class="sc-update-channel-wrap">
        <template v-if="loading.update">
          <div class="sc-update-channel-wrap-loading">
            <i class="el-icon-loading"></i> 获取数据中...
          </div>
        </template>
        <template v-else>
          <div class="sc-update-channel">
            <div class="sc-update-channel-select">
              <template v-if="canSet">
                <el-select v-model="select.value" size="mini" multiple placeholder="请选择">
                  <el-option v-for="item in select.arr" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </template>
              <template v-else>
                <div class="sc-update-channel-select-null">暂无可选频道</div>
              </template>
            </div>
            <div class="sc-update-channel-button">
              <el-button v-if="canSet" :loading="loading.submit" size="mini" type="text" @click="handleSubmit">确认</el-button>
              <el-button size="mini" type="text" @click="handleClose">取消</el-button>
            </div>
          </div>
        </template>
      </div>
      <el-button slot="reference" :loading="loading.update" size="mini" type="text" @click="handleUpdate">修改</el-button>
    </el-popover>
  </div>
</template>

<script>
  export default {
    props: {
      row: {
        type: Object,
        default() {
          return {}
        }
      },
      channel: {
        type: Array,
        default() {
          return []
        }
      },
      type: {
        type: String,
        default: ''
      },
      updateDisable: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        visible: false,
        loading: {
          update: false,
          submit: false
        },
        select: {
          arr: [],
          value: []
        }
      }
    },
    computed: {
      channelList() {
        if (this.channel.length > 0) {
          const tmpList = this.channel.map(item => {
            return item.name
          })
          return tmpList.join('，')
        } else {
          return '——'
        }
      },
      canSet() {
        return this.select.arr.length > 0
      }
    },
    methods: {
      handleClose() {
        this.visible = false
      },
      afterHide() {
        this.loading.update = false
      },
      async handleSubmit() {
        let setApi = 'live/setChannel'
        if (this.type === '2') {
          setApi = 'stock/setChannel'
        }
        this.loading.submit = true
        const tmpChannels = this.select.value.map(item => {
          return { id: item }
        })
        try {
          await this.$api[setApi]({
            id: this.row.id,
            channels: tmpChannels
          })
          this.visible = false
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.$emit('success')
        } catch (err) {
          console.error('handleSubmit err: ', err)
        }
        this.loading.submit = false
      },
      async handleUpdate() {
        this.loading.update = true
        this.select.value = this.channel.map(item => {
          return item.id
        })
        try {
          const { data: resData } = await this.$api['channel/list']({
            page: 1,
            size: 10e3,
            type: this.type
          })
          this.select.arr = resData
        } catch (err) {
          console.error('handleUpdate err: ', err)
        }
        this.loading.update = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .sc-update-channel-wrap {
    padding: 5px;

    &-loading {
      font-size: 12px;
      color: #999;
      text-align: center;
    }
  }

  .sc-update-channel {
    display: flex;
    align-items: stretch;

    &-select {
      flex: 1;

      .el-select {
        display: block;
      }

      &-null {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-size: 12px;
        color: #999;
      }
    }

    &-button {
      margin-left: 15px;
      width: 80px;
      flex-shrink: 0;
      display: flex;
      align-items: flex-end;
    }
  }
</style>
